<template>
  <div class="content">
    <div class="container">
      <p></p>
      <ul class="text_item">
        <li
          :class="activeIndex == index ? 'items' : 'item'"
          @click="clickItem(index)"
          v-for="(item, index) in list"
          :key="index"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      list: [
        { id: 1, name: "收益" },
        { id: 2, name: "成本收入比" },
        { id: 3, name: "净息差" },
        { id: 4, name: "资产总额" },
        { id: 5, name: "负债总额" },
        { id: 1, name: "收益" },
        { id: 2, name: "成本收入比" },
        { id: 3, name: "净息差" },
        { id: 4, name: "资产总额" },
        { id: 5, name: "负债总额" },
        { id: 1, name: "收益" },
        { id: 2, name: "成本收入比" },
        { id: 3, name: "净息差" },
        { id: 4, name: "资产总额" },
        { id: 5, name: "负债总额" }
      ],
      num: 0,
      max: 0,
      start: 0,
      left: -1,
      activeIndex: 0
    };
  },
  mounted() {
    this.$nextTick(() => {
      console.log(this.list.length / 2);
      let i = parseInt(this.list.length - 3);
      this.start = i;
      console.log(this.list[i], i, "中间的");
      this.clickItem(i);
    });
  },
  methods: {
    clickItem(index) {
      this.activeIndex = index;
      let that = this;
      // if (index < 2) {
      //   that.list.forEach(item => {
      //     console.log(item);
      //   });
      // }
      // 获取到 container 整个盒子
      var container = document.querySelector(".text_item");
      console.log(container);
      // 获取包裹盒子 container.offsetWidth
      var containerW = container.offsetWidth;

      // 找到所有需要被点击的 item 的集合
      var itemList = document.querySelectorAll(".item");
      // 遍历数组
      for (let i = 0; i < itemList.length; i++) {
        if (i == index) {
          that.max = itemList[i].offsetWidth;
          container.scrollLeft =
            itemList[i].offsetLeft -
            containerW / 2 +
            itemList[i].offsetWidth / 2;
          that.num =
            itemList[i].offsetLeft -
            containerW / 2 +
            itemList[i].offsetWidth / 2;
          // console.log(itemList[i].offsetWidth * index);
        }
        // 给每个元素添加点击事件
        itemList[i].onclick = function() {
          // 获取到当前点击元素的 offsetLeft  - 包裹盒子 offsetWidth 的一半 + 当前点击元素 offsetWidth 的一半
          var scrollLeftNum =
            itemList[i].offsetLeft -
            containerW / 2 +
            itemList[i].offsetWidth / 2;
          // console.log(scrollLeftNum, "距离");

          // 赋值
          // console.log(index);
          // if (index == 1) {
          //   that.min = scrollLeftNum;
          // }
          if (that.start < index) {
            that.left++;
            let obj = that.list[that.left];
            that.list.push(obj);
            container.scrollLeft = that.num - that.left;
          } else {
            container.scrollLeft = scrollLeftNum;
          }
        };
      }
    }
  }
};
</script>

<style scoped>
.content {
  /* // margin-top: 17px; */
  width: 100%;
  height: 100%;
  /* background: url("../../assets/image/scienceBg.png") 0 0 no-repeat; */
  background-size: 100% 100%;
}

.main {
  height: 80%;
  width: 100%;
  /* // border: 1px solid red; */
}

.container {
  height: 20%;
  width: 90%;
  background-color: transparent;
  white-space: nowrap;
  overflow: auto;
  position: relative;
  /* 可以使窗口平稳滚动 */
  /* scroll-behavior: smooth; */
  margin: 0 auto;
  text-align: center;
}

.container p {
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, #015159 0%, #25cbfc 50%, #015159 100%);
  position: absolute;
  top: 15px;
}

.text_item {
  /* justify-content: space-around; */
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  white-space: nowrap;
  overflow-x: auto;
  /* 可以使窗口平稳滚动 */
  scroll-behavior: smooth;
  /* background-color: #00B0B0; */
}

.item {
  display: inline-block;
  width: 20%;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #00b0b0;
  line-height: 17px;
  position: relative;
  margin-top: 27px;
}

.item::after {
  display: inline-block;
  content: "";
  width: 10px;
  height: 10px;
  background-color: blue;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  position: absolute;
  left: 50%;
  top: -15px;
  transform: translateX(-50%);
}
.items {
  display: inline-block;
  width: 20%;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #00b0b0;
  line-height: 17px;
  position: relative;
  margin-top: 27px;
}

.items::after {
  display: inline-block;
  content: "";
  width: 10px;
  height: 10px;
  background-color: #fff90a;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  position: absolute;
  left: 50%;
  top: -15px;
  transform: translateX(-50%);
}

.text_item::-webkit-scrollbar {
  display: none;
}
</style>
